<template>
	<view class="Bfont" style="height: 100vh;overflow: hidden;"
		:style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">
		<view class="zinde padding-top-100 padding-left-35">
			<image @click="back" class="w-60 h-60" :src="Imgbase + '/new_goodbp_img7.png'" mode="aspectFit">
			</image>
		</view>

		<view class="text-center font-80" style="color: #A15B25;letter-spacing: 16rpx;">
			欢乐模式
		</view>
		<view class="text-center font-80" style="color: #A15B25;letter-spacing: 16rpx;">
			好友助力
		</view>

		<view class="w100 bottom_item h-1200 padding-top-25 padding-left-30 padding-right-30 overhid">
			<view class="text-center">
				本场还差 <text class="red padding-left-10 padding-right-10 font-34">{{hasNum}}</text> 次助力
			</view>

			<view class="two_item w100 h-300 radius-22 margin-top-40" @click="toHelp">
				<view class="red font-45 text-center padding-top-20" style="letter-spacing: 5rpx;">
					{{state==0?'助力成功':'点我助力'}}
				</view>

				<view class="text-center">
					<image class="h-200 img_item" :src="Imgbase + '/new_goodcdk_img4.png'" mode="aspectFill">
					</image>
				</view>
			</view>

			<view class="text-center padding-top-25">
				助力好友，自己也可以获得体验币哦
			</view>


			<view class="margin-top-30 box w100 h-600 radius-25">
				<scroll-view scroll-y class="w100 h100 padding-30" scroll-with-animation style="overflow: hidden;"
					@scrolltolower="onbottom()">
					<view class="flex padding-bottom-20" v-for=" (item,index) in helplist" :key="index">
						<view class="w-100 h-100 radius-50">
							<image class="w100 h100 radius-50" :src="item.avatar" mode="aspectFill"></image>
						</view>
						<view class="font-22 padding-left-20 w-260">
							<view class="padding-bottom-10 w100 one-line" style="color: #A15B25;">
								{{item.nickname}}
							</view>
							<view class="" style="color: #a5a5a5;">
								{{item.create_at}}
							</view>
						</view>
						<view class="font-22" style="color: #A15B25;">
							助力{{item.money}}体验币
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				uid: 0,
				hasNum: '',
				state: -1,
				page: 1,
				helplist: []
			}
		},
		onLoad(e) {
			this.uid = e.id
			if (uni.getStorageSync('token') == '') {
				this.$uniApi.trylogin();
			}
		},
		onShow() {

			this.isHelp()
			this.helpLogs()
		},
		methods: {
			onbottom() {
				this.page++;
				this.helpLogs();
			},
			// 助力记录
			async helpLogs() {
				let _this = this
				let item = await this.$api.post('Usersys/helpLogs', {
					page: this.page,
					token: uni.getStorageSync('token'),
					to_uid: _this.uid,
				})
				_this.helplist = _this.helplist.concat(item.data.list)
			},
			// 点击助力
			async toHelp() {
				let _this = this
				let item = await this.$api.post('Usersys/toHelp', {
					to_uid: _this.uid,
					token: uni.getStorageSync('token'),
				})

				if (item.code == 1) {
					uni.showToast({
						icon: 'none',
						title: item.msg
					});
					_this.helplist = []
					_this.helpLogs()
					_this.isHelp()
				}
			},
			// 获取助力状态
			async isHelp() {
				if (this.state == 0) {
					return
				}
				let _this = this
				let item = await this.$api.post('Usersys/isHelp ', {
					to_uid: _this.uid,
					token: uni.getStorageSync('token'),
				})
				this.hasNum = item.data.hasNum
				this.state = item.data.state
			},
			back() {
				uni.reLaunch({
					url: '/pages/goodspoor/index'
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.box {
		background-color: rgba(161, 91, 37, .1);
		box-shadow: inset 0 0 10px #bc6a2a;
	}

	.bottom_item {
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba(255, 255, 255, .8);
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;


		.two_item {
			border: 4rpx solid #A15B25;
			position: relative;
		}

		.img_item {
			position: absolute;
			bottom: 0;
			width: 36%;
			left: 34%;
		}
	}

	.red {
		color: red;
	}
</style>